<!--  -->
<template>
  <div class="size-full">
    <div class="size-full" ref="ChartLeft3"></div>
    <DialogBox
      title="板块办件趋势"
      :show="showDialog"
      @close="showDialog = false"
      @opened="initDetail"
    >
      <div ref="detailChartLeft3" class="h-full"></div>
    </DialogBox>
  </div>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import DialogBox from '@/components/box/DialogBox.vue'
import { defaultTooltipStyle, useEcharts } from '@/util/e-chart'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import * as _ from 'lodash'
import { onMounted, ref } from 'vue'
const showDialog = ref(false)

const ChartLeft3 = ref<HTMLElement>()

const initMainChart = () => {
  requestApi.GetNearlyHalf().then((res) => {
    const Data = getMainOption(
      res.map((e) => e.date),
      res.map((e) => e.beforeLastYear),
      res.map((e) => e.lastYear),
      res.map((e) => e.thisYear)
    )
    new useEcharts(
      ChartLeft3.value!,
      Data,
      (data) => {
        console.log(data)
        detailActiveLabel.value = data.seriesName
        initTable()
      },
      true
    )
  })
}

const detailActiveLabel = ref()
const initTable = () => {
  showDialog.value = true
}

const getMainOption = (
  xAxis: string[],
  datas1: number[],
  datas2: number[],
  datas3: number[]
): any => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      // formatter: (params: any) => {
      //   const pm = params[3]
      //   return `<div>${pm.axisValue}</div><div class="flex items-center"><div class="chart-symbol" style="background-color:${labelColors[rankByIndex[pm.dataIndex] - 1]}"></div>${pm.value}</div>`
      // },
      ...defaultTooltipStyle
    },
    legend: {
      data: ['2022', '2023', '2024', '2022'],
      textStyle: {
        color: '#fff',
        fontStyle: 'normal',
        fontFamily: 'D-DIN-PRO-500-Medium',
        fontSize: 12
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis,
      axisLabel: {
        color: '#7EB2E0',
        fontStyle: 'normal',
        fontFamily: 'D-DIN-PRO-500-Medium',
        fontSize: 14
      }
    },
    yAxis: {
      type: 'value',
      name: '万件',
      nameTextStyle: {
        color: '#7EB2E0', // 设置名称字体颜色
        fontSize: 14, // 设置名称字体大小
        align: 'right',
        padding: [0, 6, 0, 0]
      },
      axisLabel: {
        color: '#7EB2E0',
        fontStyle: 'normal',
        fontFamily: 'D-DIN-PRO-500-Medium',
        fontSize: 14
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#0A375D',
          width: 2 // 虚线宽度
        }
      }
    },
    series: [
      {
        name: '2022',
        type: 'line',
        data: datas1,
        symbolSize: 8
      },
      {
        name: '2023',
        type: 'line',
        data: datas2,
        symbolSize: 8
      },
      {
        name: '2024',
        type: 'line',
        data: datas3.filter((e) => e > 0),
        symbolSize: 8
      }
    ]
  }
}
onMounted(() => {
  initMainChart()
})

//弹窗内逻辑
const detailChartLeft3 = ref<HTMLElement>()
const initDetail = () => {
  requestApi.GetNearlyBjl().then((res) => {
    const yearGroup = _.groupBy(res, 'year')
    const centerNameGroup = _.groupBy(res, 'centername')

    let xAxis: string[] = []
    let dataList: number[][] = []
    let seriesList: string[] = []

    for (const key in centerNameGroup) {
      xAxis.push(key)
      centerNameGroup[key].forEach((item, index) => {
        if (dataList[index]) {
          dataList[index].push(parseInt(item.projectcount))
        } else {
          dataList[index] = [parseInt(item.projectcount)]
        }
      })
    }
    for (const key in yearGroup) {
      seriesList.push(key)
    }
    const Data = getDetailOptions(xAxis, dataList, seriesList)
    new useEcharts(detailChartLeft3.value!, Data, (data) => {
      console.log(data.value)
    })
  })
}
const getDetailOptions = (
  xAxis: string[],
  data: number[][],
  seriesNameList: string[]
): EChartsOption => {
  const legendList = seriesNameList.map((e) => e + '年办件数量')

  const getSelect = () => {
    const arr = legendList
    const ans: any = {}
    arr.forEach((item) => {
      ans[item] = item.indexOf(detailActiveLabel.value) > -1
    })
    return ans
  }

  return {
    color: ['#5470c6', '#91cc75', '#fac858', '#52D98B'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      top: 10,
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      },
      data: legendList,
      selected: getSelect()
    },
    grid: {
      left: 80,
      right: 0,
      bottom: 30,
      top: 50
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#FFF', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0], // 与轴线的间距 [上, 右, 下, 左]
          width: 60,
          overflow: 'break',
          align: 'center',
          interval: 0 //使x轴文字显示
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xAxis
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '办件数（件）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: legendList[0],
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0.5,
                  color: '#5470c6' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#5470c630' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        data: data[0]
      },

      {
        name: legendList[1],
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0.5,
                  color: '#91cc75' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#91cc7530' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        data: data[1]
      },

      {
        name: legendList[2],
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0.5,
                  color: '#F2C96F' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#F2C96F30' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        data: data[2]
      },

      {
        name: legendList[3],
        type: 'bar',
        barWidth: '12%',
        itemStyle: {
          //lenged文本
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0.5,
                  color: '#fac858' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fac85830' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        data: []
      }
    ]
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
